<script setup>
    import { getCurrentInstance, ref, inject } from 'vue';
    import { useRouter } from 'vue-router';
    const axios = getCurrentInstance().proxy.$http;
    const router = useRouter();


    const toplistData = ref({});
    const getToplist = async () => {
        const { data } = await axios.get('/toplist');
        toplistData.value = data;

        toplistData.value.list.forEach((item, index) => {
            if(index === 0) {
                item.className = "active"
            } else{
                item.className = ""
            }
        })
        selectToplist(0, data.list[0].id, data.list[0].updateFrequency)
    }
    getToplist();

    const selectToplist = (index, id, updateTime) => {
        toplistData.value.list.forEach((item, i) => {
            if(index === i) {
                item.className = 'active';
            } else {
                item.className = '';
            }
        })
        router.push({
            name: 'detail',
            query: { id },
            params: { updateTime }
        }) 
        document.documentElement.scrollTop = 0;
    }
</script>

<template>
    <div class="container">
        <article>
            <div class="title">{{toplistData.artistToplist?.name}}</div>
            <ul>
                <template
                    v-for="(item, index) of toplistData.list" 
                    :key="index"
                >
                    
                <div class="title" v-if="index === 4">全球媒体榜</div>
                    <li 
                        :class="item.className"
                        @click="selectToplist(index, item.id, item.updateFrequency)"
                    >
                        <div class="left">
                            <img :src="item.coverImgUrl">
                        </div>
                        <div class="right">
                            <p>{{item.name}}</p>
                            <p>{{item.updateFrequency}}</p>
                        </div>
                    </li>
                </template>
            </ul>
        </article>
        <router-view></router-view>
    </div>
    <UserFooter></UserFooter>
</template>

<style lang="less" scoped>
    .container{
        margin: 0 auto;
        width: 980px;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        display: flex;
        article{
            width: 260px;
            flex-shrink: 0;
            border-right: 1px solid #ccc;
            padding-top: 30px;
            
            .title{
                margin: 0px 0px 10px 10px;
            }
            ul{
                li{
                    width: 220px;
                    height: 40px;
                    padding: 10px 20px;
                    cursor: pointer;
                    img{
                        height: 40px;
                        width: 40px;
                        margin-right: 20px;
                        float: left;
                    }
                    p{
                        font-size: 12px;
                        &:last-child{
                            margin-top: 5px;
                            color: rgb(131, 131, 131);
                        }
                    }
                }
                .active{
                    background: rgba(0, 0, 0, 0.1);
                }
            }
        }
    }
</style>